<template>
  <div class="qrcode-demo">
    <h2>二维码生成示例</h2>

    <!-- 示例1：基础用法 -->
    <section class="demo-section">
      <h3>基础用法</h3>
      <div class="demo-box">
        <QRCode value="https://deepseek.com" />
        <div class="description">
          默认配置的二维码
        </div>
      </div>
    </section>

    <!-- 示例2：自定义样式 -->
    <section class="demo-section">
      <h3>自定义样式</h3>
      <div class="demo-box">
        <QRCode
            value="https://deepseek.com"
            :size="250"
            color-dark="#2c3e50"
            color-light="#ecf0f1"
        />
        <div class="description">
          自定义大小和颜色
        </div>
      </div>
    </section>

    <!-- 示例3：带事件处理 -->
    <section class="demo-section">
      <h3>事件处理</h3>
      <div class="demo-box">
        <QRCode
            value="Event Example"
            :margin="10"
            @generated="handleGenerated"
            @error="handleError"
        />
        <div class="status-message" :class="{ error: hasError }">
          {{ statusMessage }}
        </div>
      </div>
    </section>

    <!-- 示例4：纠错级别 -->
    <section class="demo-section">
      <h3>纠错级别</h3>
      <div class="demo-box">
        <QRCode
            value="Error Correction Example"
            type="Q"
        />
        <div class="description">
          使用 Q 级别纠错（约25%）
        </div>
      </div>
    </section>

    <!-- 示例5：动态内容 -->
    <section class="demo-section">
      <h3>动态内容</h3>
      <div class="demo-box">
        <div class="input-group">
          <input
              v-model="dynamicValue"
              placeholder="输入二维码内容"
              class="demo-input"
          >
        </div>
        <QRCode
            :value="dynamicValue || '请输入内容'"
            :size="200"
        />
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import QRCode from '@/components/QRCode/QRCode.vue'

const dynamicValue = ref('')
const statusMessage = ref('')
const hasError = ref(false)

const handleGenerated = (dataUrl) => {
  statusMessage.value = '二维码生成成功！'
  hasError.value = false
  console.log('QR Code generated:', dataUrl)
}

const handleError = (error) => {
  statusMessage.value = '生成失败：' + error.message
  hasError.value = true
  console.error('QR Code generation failed:', error)
}
</script>

<style scoped>
.qrcode-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.demo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.description {
  color: #666;
  font-size: 14px;
  text-align: center;
}

.input-group {
  width: 100%;
  max-width: 300px;
  margin-bottom: 15px;
}

.demo-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.demo-input:focus {
  outline: none;
  border-color: #409eff;
}

.status-message {
  padding: 8px 12px;
  border-radius: 4px;
  background: #f0f9eb;
  color: #67c23a;
  font-size: 14px;
}

.status-message.error {
  background: #fef0f0;
  color: #f56c6c;
}

@media (max-width: 768px) {
  .qrcode-demo {
    padding: 10px;
  }

  .demo-section {
    padding: 15px;
  }

  .demo-box {
    padding: 15px;
  }
}
</style>